<template>
	<view>
		<view class="w-100">
			<view class="w-100 flex align-end justify-end justify-content-end">
				<view class="w-100 flex align-end justify-end justify-content-end dingbu mt-4 mr-1" style="width: 80px;">
					<uni-data-select class="flex justify-content-end" v-model="list.lang" :localdata="langs" :clear="false" @change="change">
					</uni-data-select>
				</view>
			</view>
			<view class=" ">
				<view class="w-100 flex align-content-center justify-center" style="margin-top: 60rpx;">
					<image src="../../static/login_logo.png" style="width: 250rpx;height: 50rpx;" mode="aspectFit"></image>
					
					
				</view>
				<view class="w-100 flex align-content-center justify-center" style="text-align: center;font-size: 15px;color: #b0b0b0;font-weight: 700;margin-top: 80rpx;">
					Mobile ERP 
				</view>
			</view>
			<view class="content">
				<view class="pt-2">
					<uni-select class="flex justify-content-end" v-model="list.shuju" :iconF="diqiu" :localdata="datashuju" :clear="false">
					</uni-select>
				</view>
				<view class="flex justify-start pt-2"  style="padding-left:8px;">
					<text class="flex align-center iconfont icon-yonghuguanli Yicon" style=""></text>
					<view class="flex align-center justify-center">
						<input class="uni-input flex align-center" v-model="list.username" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="flex justify-start pt-2"  style="padding-left:8px;">
					<text class="flex align-center iconfont icon-ai-password Yicon" style=""></text>
					<view class="flex align-center justify-center">
				
						<input class="uni-input flex align-center" type="password" v-model="list.password" placeholder="密码" />
					</view>
				</view>
				<view class="pt-2">
					<uni-select class="flex justify-content-end" v-model="list.db" :iconF="Ilianjie" :localdata="dbs" :clear="false">
					</uni-select>
				</view>
				<view class="pt-2">
					<button class="bg-primary " @click="logins()" style="border-radius: 45rpx;color: #fff;font-weight: 700">登陆</button>
				</view>
				<view class="pt-2 flex align-center justify-between">
					<view class="">
						<checkbox-group  @change="onCheckboxChange">
							<checkbox checked value="1"/><text>保存用户名</text>
						</checkbox-group>
					</view>
					<view class="">
						<text @click="getDeviceInfo()">设备注册</text>
					</view>
				</view>
				
				<view class="">
					<uni-popup ref="popup" type="center" :animation='false' :maskClick="false" border-radius="10px 10px 0 0">
						<view class="" style="width: 80%;height: 600rpx;background-color: #fff;margin: 80rpx 10%;padding-top: 10rpx;">
							<view class="flex align-center justify-center" style="">
								<text style="margin-top: 50rpx;font-size: 40rpx;font-weight: bold;">设备注册请求</text>
							</view>
							<view class="mt-5">
								<input class="uni-input flex align-center Yinput" style="" v-model="list.userID" placeholder="登陆ID" />
							</view>
							<view class="mt-3">
								<input class="uni-input flex align-center Yinput" v-model="list.deviceID"  />
							</view>
							
							<view class="flex align-center justify-center mt-3">
								<button class="bg-hei w-100 ml-2 mr-2" style="color: #fff;" @click="tijiao">提交</button>
							</view>
							<view class="flex align-center justify-center mt-2">
								<button class="w-100 ml-2 mr-2" style="color: #fff;background-color: #b0b0b0;" @click="closes">关闭</button>
							</view>
						</view>
						
						
					</uni-popup>
					
				</view>
				
			</view>
			
			
			
			
		</view>
	</view>
</template>

<script>
	import $C from "@/common/config.js";
	export default {
		data() {
			return {
				diqiu:'globe',
				iuser:'yonghuguanli',
				Ipass:'',
				Ilianjie:'link',
				list:{
					username:'',
					password:'',
					lang:"CHN",
					shuju:"DEV",
					db:'norm',
					bao:true,
					userID:'',
					deviceID:''
				},
				langs:[{
						"value": "CHN",
						"text": "CHN"
					},
					{
						"value": 'KOH',
						"text": "KOH"
					},
					{
						"value": "ENG",
						"text": "ENG"
					}],
				datashuju:[
						{"value": "DEV","text": "YUDO DEV"},
						{"value": "SZ","text": "YUDO SZ"},
						{"value": "GD","text": "YUDO GD"},
					],
				dbs:[
					{"value": "norm","text": "Normal DB"},
					{"value": 'text',"text": "Test DB"},
				]
			}
		},
		onLoad() {
			console.log($C.url)
		},
		created(){
			const that = this
			const  userID = uni.getStorageSync('userID');
			if(userID){
				that.list.username = userID
			}
			that.list.userID = userID;
			let Deviceid = uni.getDeviceInfo()
			
			that.list.deviceID = Deviceid.deviceId;
			console.log(that.list.deviceID);
			
		},
		methods: {
			change(e) {
				console.log('e:', e);
				console.log(this.dbs);
				
			},
			getDeviceInfo(){
				this.$refs.popup.open('top')
				let devices = uni.getDeviceInfo();
				console.log(devices.deviceId);
				this.list.deviceID = devices.deviceId;
			},
			logins(){
				
				uni.request({
				  url: 'http://192.168.158.77/test.php', // 替换为你的后端API接口地址
				  method: 'GET', // 请求方法: GET, POST, PUT, DELETE等
				  header: {
					'Content-Type': 'application/json', // 根据需求设置请求头
				  },
				  success: (response) => {
					if (response.statusCode === 200) {
					  this.result = response.data; // 请求成功，处理返回的数据
					  console.log('请求成功:', this.result); // 输出请求成功的返回数据
					} else {
					  console.log('请求失败:', response); // 输出请求失败的响应
					}
				  },
				  fail: (error) => {
					console.error('请求出错:', error); // 请求失败的处理
				  }
				});
				
				// uni.redirectTo({
				// 	url: '/pages/index/index'
				// });
			},
			onCheckboxChange(e){
				
				console.log(e.detail.value.length)
				if(e.detail.value.length>0){
					this.list.bao = true;
				}else{
					this.list.bao = false;
				}
			},
			tijiao(){
				const that = this
				uni.showLoading({
					title:"提交成功"
				})
				if(that.list.userID.length<=0){
					uni.showModal({
						title:"YUDO",
						content:"登录名不能为空",
						success() {
							
						}
					})
					uni.hideLoading();
					return false;
				}
				const  userID = uni.getStorageSync('userID');
				if(!userID || that.list.userID != userID){
					uni.setStorageSync('userID',that.list.userID)
				}
				
				that.list.username = that.list.userID
				
				setTimeout(function(){
					const  DeviceID = uni.getStorageSync('DeviceID');
					if(!DeviceID){
						uni.setStorageSync('DeviceID',DeviceID.deviceID)
						
					}
					that.list.deviceID = DeviceID.deviceID
					
					uni.hideLoading();
					that.$refs.popup.close()
					
				},1000)
				
				
			},
			closes(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
@import url("../../common/free.css");
@import url("../../common/iconfont.css");
@import url("../../common/icon.css");
.w-100 .uni-select{
	border: none !important;
}
.uni-select__input-box{

}
.uni-select__input-text{
	width: 60% !important;
}
.content{
	margin: 20rpx 12%;
	
}
.Yicon{
	
	width: 65rpx;height: 65rpx;font-size: 40rpx;
}
.Yinput{
	padding: 10rpx 20rpx;height: 20rpx;margin: 10rpx 20rpx;border: 2rpx solid #b0b0b0;
}
</style>
